<template>
    <div>
      <div><p>我的好友</p></div>
      <div class="hynav">
        <div class="hynav1"> 
          <div class="hynav1_1"><img src="haoyouerji/haoyouerji1.png" alt=""></div>
        </div>
        <div class="hynav2">
          <div>傻子考研一定上岸<span class="aiouniya">|艾欧尼亚</span></div>
          <div><span class="iconfont icon-home2" ></span>爱学习的辅助</div>
          <div> <span class="zuansan">lol钻石三</span> </div>
        </div> 
        <div class="hynav3">
          <p>游戏离线</p>
          <div class="hynav3_1">聊天</div>
        </div>
      </div>
      <div class="hynav">
        <div class="hynav1"> 
          <div class="hynav1_1"><img src="haoyouerji/haoyouerji2.png" alt=""></div>
        </div>
        <div class="hynav2">
          <div>我的李青不会秀<span class="aiouniya">|雷瑟守备</span></div>
          <div><span class="iconfont icon-home2" ></span>葬爱</div>
          <div> <span class="zuansan">lol黄金1</span> </div>
        </div> 
        <div class="hynav3">
          <p>游戏离线</p>
          <div class="hynav3_1">聊天</div>
        </div>
      </div>
      <div class="hynav">
        <div class="hynav1"> 
          <div class="hynav1_1"><img src="haoyouerji/haoyouerji1.png" alt=""></div>
        </div>
        <div class="hynav2">
          <div>傻子考研一定上岸<span class="aiouniya">|艾欧尼亚</span></div>
          <div><span class="iconfont icon-home2" ></span>爱学习的辅助</div>
          <div> <span class="zuansan">lol钻石三</span> </div>
        </div> 
        <div class="hynav3">
          <p>游戏离线</p>
          <div class="hynav3_1">聊天</div>
        </div>
      </div>
      <div class="hynav">
        <div class="hynav1"> 
          <div class="hynav1_1"><img src="haoyouerji/haoyouerji3.png" alt=""></div>
        </div>
        <div class="hynav2">
          <div>天生下凡<span class="aiouniya">|黑色玫瑰</span></div>
          <div><span class="iconfont icon-home2" ></span>小皮</div>
          <div> <span class="zuansan">lol白金二</span> </div>
        </div> 
        <div class="hynav3">
          <p>游戏离线</p>
          <div class="hynav3_1">聊天</div>
        </div>
      </div>
      <div class="hynav">
        <div class="hynav1"> 
          <div class="hynav1_1"><img src="haoyouerji/haoyouerji4.png" alt=""></div>
        </div>
        <div class="hynav2">
          <div>洒几滴<span class="aiouniya">|影流</span></div>
          <div><span class="iconfont icon-home2" ></span>我的骄傲看</div>
          <div> <span class="zuansan">lol白银</span> </div>
        </div> 
        <div class="hynav3">
          <p>游戏离线</p>
          <div class="hynav3_1">聊天</div>
        </div>
      </div>
      <div class="hynav">
        <div class="hynav1"> 
          <div class="hynav1_1"><img src="haoyouerji/haoyouerji5.png" alt=""></div>
        </div>
        <div class="hynav2">
          <div>爱上牛大苏<span class="aiouniya">|艾欧尼亚</span></div>
          <div><span class="iconfont icon-home2" ></span>大苏打</div>
          <div> <span class="zuansan">lol青铜</span> </div>
        </div> 
        <div class="hynav3">
          <p>游戏离线</p>
          <div class="hynav3_1">聊天</div>
        </div>
      </div>
      <div class="hynav">
        <div class="hynav1"> 
          <div class="hynav1_1"><img src="haoyouerji/haoyouerji6.png" alt=""></div>
        </div>
        <div class="hynav2">
          <div>傻子考研一定上岸<span class="aiouniya">|艾欧尼亚</span></div>
          <div><span class="iconfont icon-home2" ></span>爱学习的辅助</div>
          <div> <span class="zuansan">lol钻石三</span> </div>
        </div> 
        <div class="hynav3">
          <p>游戏离线</p>
          <div class="hynav3_1">聊天</div>
        </div>
      </div>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.hynav{
  width: 100%;
  height: 1rem;
  display: flex;
  margin-top: 0.1rem;
}
.hynav1{
  width: 15%;
  height: 100%;
  /* background-color: aqua; */
}
.hynav2{
  width: 65%;
  height: 100%;
  margin: 0 0 0 0.15rem;
  /* background-color: blueviolet; */
}
.hynav3{
  width: 20%;
  height: 100%;
  /* background-color: brown; */
}
.hynav1_1{
  width: 100%;
  height: 70%;
  /* background-color: aqua; */
}
.hynav1_1>img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.hynav2>div{
  width: 100%;
  height: 33%;
}
.hynav>div :nth-child(1){
font-weight: 500;
}

.hynav>div :nth-child(2){
  color: gray;
}
.zuansan{
 background-color:#e9f7f7;
 color: #73aeb2;
}
.aiouniya{
  font-size: .1rem;
  color: gray;
  font-weight: 200;
}
.hynav3_1{
  width: 80%;
  height: 50%;
  border: 0.01rem solid black;
  font-size: 0.2rem;
  text-align: center;
  line-height: 00.5rem;
  font-weight: 800;
  color: black;
}
</style>